import { BasicComponent } from './basic/basic.component';
import { BorderComponent } from './border/border.component';
import { CoverComponent } from './cover/cover.component';
import { CheckedComponent } from './checked/checked.component';
import { ShadowComponent } from './shadow/shadow.component';
import { RadioComponent } from './radio/radio.component';
import { HoverableComponent } from './hoverable/hoverable.component';
import { ShadingComponent } from 'cxd/showcase/card/shading/shading.component';
import { GridLayoutComponent } from './grid-layout/grid-layout.component';

export const CardConfig = {
  location: 'Card',
  description: ``,
  description_en: ``,
  component: [
    {
      demo: BasicComponent,
      codePath: 'showcase/card/basic/basic.component',
      demoTitle: '基础卡片',
      demoTitle_en: 'Basic card',
      demoDescription: '包含标题、内容、操作区域',
      demoDescription_en: 'A basic card containing a title, content and an extra corner content.',
    },
    {
      demo: BorderComponent,
      codePath: 'showcase/card/border/border.component',
      demoTitle: '带边框',
      demoTitle_en: 'Bordered card',
      demoDescription: '带边框卡片',
      demoDescription_en: 'bordered card',
    },
    {
      demo: ShadowComponent,
      codePath: 'showcase/card/shadow/shadow.component',
      demoTitle: '阴影卡片',
      demoTitle_en: 'Shaded card',
      demoDescription: '卡片默认显示阴影',
      demoDescription_en: 'Cards show shadows by default',
    },
    {
      demo: CoverComponent,
      codePath: 'showcase/card/cover/cover.component',
      demoTitle: '图形卡片',
      demoTitle_en: 'Image content',
      demoDescription: '图形（包含图片，Logo）作为对象主体的最重要识别要素',
      demoDescription_en: `Graphics (including pictures, Logos) are the most important identification elements of the subject of the object`,
    },
    {
      demo: HoverableComponent,
      codePath: 'showcase/card/hoverable/hoverable.component',
      demoTitle: '鼠标悬浮',
      demoTitle_en: 'Card hoverable',
      demoDescription: `如果整张卡片可点击下钻，卡片变为Hover状态`,
      demoDescription_en: `If the entire card can be clicked to drill down, the card changes to the Hover state`,
    },
    {
      demo: ShadingComponent,
      codePath: 'showcase/card/shading/shading.component',
      demoTitle: '底纹卡片',
      demoTitle_en: 'Card has shading',
      demoDescription: ``,
      demoDescription_en: ``,
    },
    {
      demo: CheckedComponent,
      codePath: 'showcase/card/checked/checked.component',
      demoTitle: '卡片的批量操作',
      demoTitle_en: 'Batch operations on cards',
      demoDescription: `底部操作栏左下角的视觉空白区作为位置，鼠标hover到卡片区域内出现多选按钮，点击多选按钮进行卡片的选择和取消选择操作，选中后卡片后呈现选中状态`,
      demoDescription_en: `The visual blank area in the lower left corner of the bottom operation bar is used as the position. When the mouse hovers over the card area, a multi-selection button appears. Click the multi-selection button to select and deselect the card. After the card is selected, it will appear in the selected state`,
    },
    {
      demo: RadioComponent,
      codePath: 'showcase/card/radio/radio.component',
      demoTitle: '卡片单选',
      demoTitle_en: 'Card single choice',
      demoDescription: ``,
      demoDescription_en: ``,
    },
    {
      demo: GridLayoutComponent,
      codePath: 'showcase/card/grid-layout/grid-layout.component',
      demoTitle: '卡片栅格布局',
      demoTitle_en: 'Card Grid Layout',
      demoDescription: ``,
      demoDescription_en: ``,
    },
  ],
  useRule: [],
  useSuggestion: [],
  mApi: [
    {
      selector: 'lv-card',
      snippet: `<lv-card style="width: 452px" lvTitle="Card title" [lvExtra]="extraTpl">
                  <p>Card content</p>
                  <p>Card content</p>
                  <p>Card content</p>
                </lv-card>`,
      name: 'lv-card',
      name_en: 'lv-card',
      api: [
        {
          attribute: 'lvTitle',
          type: 'string | TemplateRef<void>',
          default: '-',
          description: '卡片标题',
          description_en: 'Card title',
        },
        {
          attribute: 'lvExtra',
          type: 'string | TemplateRef<void>',
          default: '-',
          description: '卡片右上角的操作区域',
          description_en: 'The action area in the upper right corner of the card',
        },
        {
          attribute: 'lvCover',
          type: 'TemplateRef<void>',
          default: '-',
          description: `卡片封面`,
          description_en: `Card cover`,
        },
        {
          attribute: 'lvAction',
          type: 'TemplateRef<void>',
          default: '-',
          description: `卡片底部操作区域`,
          description_en: `Action area at the bottom of the card`,
        },
        {
          attribute: 'lvSize',
          type: "'small' | 'default'",
          default: 'default',
          description: '卡片尺寸，默认为24px边距卡片。小尺寸卡片为16px边距',
          description_en: 'Card size, default is 24px margin card. 16px margins for small size cards',
        },
        {
          attribute: 'lvBordered【该属性功能使用lvType替代】',
          type: 'boolean',
          default: 'false',
          description: '是否显示边框',
          description_en: 'Whether to display the border',
        },
        {
          attribute: 'lvType',
          type: "'default' | 'border' | 'shadow'",
          default: 'default',
          description: '卡片种类',
          description_en: 'Card type',
        },
        {
          attribute: 'lvHoverable',
          type: 'boolean',
          default: 'false',
          description: '是否有hover态',
          description_en: 'Is there a hover state',
        },
        {
          attribute: 'lvShading',
          type: 'boolean | string',
          default: '--',
          description: '是否显示默认底纹 | 可自定义图片路径',
          description_en: 'Whether to display shading | Customizable image path',
        },
        {
          attribute: 'lvChecked',
          type: 'boolean',
          default: 'false',
          description: '是否选中',
          description_en: 'Is it selected',
        },
        {
          attribute: 'lvLoading【暂未实现】',
          type: 'boolean',
          default: 'false',
          description: '当卡片内容还在加载中时，可以用 loading 展示一个占位【暂未实现】',
          description_en: 'When the card content is still loading, you can use loading to display a placeholder [not yet implemented]',
        },
        {
          attribute: 'lvDisabled',
          type: 'boolean',
          default: 'false',
          description: '禁用卡片',
          description_en: 'Disable cards',
        },
      ],
      event: [],
    },
    {
      selector: 'lv-card-meta',
      snippet: `<lv-card-meta [lvTitle]="titleTpl" [lvDescription]="descriptionTpl"></lv-card-meta>`,
      name: 'lv-card-meta',
      name_en: 'lv-card-meta',
      api: [
        {
          attribute: 'lvTitle',
          type: 'string | TemplateRef<void>',
          default: '-',
          description: '卡片标题',
          description_en: 'Card title',
        },
        {
          attribute: 'lvAvatar',
          type: 'TemplateRef<void>',
          default: '-',
          description: `卡片头像/图标`,
          description_en: `Card Avatar/Icon`,
        },
        {
          attribute: 'lvDescription',
          type: 'string | TemplateRef<void>',
          default: '-',
          description: `描述内容`,
          description_en: `Description`,
        },
      ],
      event: [],
    },
  ],
};
